*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				height: 100%;
				color: #333;
				text-align: center;
				font-family: Georgia,"Time New Roman",Times,serif;
				background: url(../image/1.jpg) no-repeat center center fixed;
				background-size: cover;
			}
			input{
				display: none;
			}
			label{
				margin-top: 60px;
				margin-left: 10px;
				width: 80px;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				border: 1px solid #FFFFFF;
				border-radius: 10px;
				color: #FFFFFF;
			}
			
			.btn{
				margin: 100px auto;
			}
			.view{
				perspective: 1000px;
				width: 400px;
				height: 400px;
				text-align:center;
				display: inline-block;
				margin-top: 50px;
			}
			
			.box{
				display: inline-block;
				text-align: center;
				position: relative;
				width: 100%;
				height: 100%;
				transition: all 0.8s ease;
				transform-style: preserve-3d;
				transform: rotateX(-20deg) rotateY(20deg);
			}
			
			.face{
				overflow: hidden;
				position: absolute;
				border: 1px solid #666;
				background: #fff;
				box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
				color: #333;
				line-height: 400px;
				opacity: .9;
			}
			
			.box_front{
				width: 400px;
				height: 400px;
				transform: translate3d(0,0,200px);
			}
			.box_ding{
				width: 400px;
				height: 400px;
				transform: rotateX(-90deg) translate3d(0,0,200px);
			}
			.box_di{
				width: 400px;
				height: 400px;
				transform: rotateX(90deg) translate3d(0,0,200px);
			}
			.box_left{
				width: 400px;
				height: 400px;
				transform: rotateY(90deg) translate3d(0,0,200px);
			}
			.box_right{
				width: 400px;
				height: 400px;
				transform: rotateY(-90deg) translate3d(0,0,200px);
			}
			.box_bei{
				width: 400px;
				height: 400px;
				transform: rotateY(180deg) translate3d(0,0,200px);
			}
			
			#left:checked ~ .view .box{
				transform: rotateY(90deg);
			}
			#right:checked ~ .view .box{
				transform: rotateY(-90deg);
			}
			#ding:checked ~ .view .box{
				transform: rotateX(-90deg);
			}
			#di:checked ~ .view .box{
				transform: rotateX(90deg);
			}
			#bei:checked ~ .view .box{
				transform: rotateY(180deg);
			}
			img{
				width: 400px;
				height: 400px;
			}
			
			.marquee {
　			　white-space: nowrap;　　
　　			overflow:-webkit-marquee;　
　　			width: 170px;　
				
　　			-webkit-marquee-direction:right;　
　　			-webkit-marquee-speed:normal;　　
　　			-webkit-marquee-style:scrol;　　
　				　-webkit-marquee-repetition:infinite; 　　
			}
			p{
				font-size:20px;
				color:white;
			}